export const theme = {
  '': '',
  '-1': '-1',
  '0': '0',
  '1': '1',
  '2': '2',
  '3': '3',
  '4': '4',
  '5': '5',
  '6': '6',
  '7': '7',
  '8': '8',
  '9': '9',
  'gradient-to-top': 'gtt',
  'gradient-to-right': 'gtr',
  'gradient-to-bottom': 'gtb',
  'gradient-to-left': 'gtl',
}

/** 获得生成的颜色主题样式名
 * @param {string} name - 颜色主题class名
 * @param {theme} e - 样式主题
 */
export function getClass(name, e) {

}

/** rgb值 0 - 255 并取整
 * @typedef {object} rgb
 * @property {number} r
 * @property {number} g
 * @property {number} b
 */

/** hsl 值，已经乘以了 360, 100, 100 并保留两位小数
 * @typedef {object} hsl
 * @property {number} h
 * @property {number} s
 * @property {number} l
 */

/** rgb 转换成 hsl
 * @param {rgb} rgb
 * @returns {hsl}
 */
export function rgbToHsl(rgb) {
  let { r, g, b } = rgb;

  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }

    h /= 6;
  }

  h = Number((h * 360).toFixed(2));
  s = Number((s * 100).toFixed(2));
  l = Number((l * 100).toFixed(2));

  return { h, s, l };
}

const hue2rgb = (p, q, t) => {
  if (t < 0) t += 1;
  if (t > 1) t -= 1;
  if (t < 1 / 6) return p + (q - p) * 6 * t;
  if (t < 1 / 2) return q;
  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
  return p;
};

/** hsl 转换成 rgb
 * @param {hsl} hsl
 * @returns {rgb}
 */
export function hslToRgb(hsl) {
  const h = hsl.h / 360;
  const s = hsl.s / 100;
  const l = hsl.l / 100;

  let r, g, b;

  if (s === 0) {
    // 当饱和度为 0 时，结果为灰色
    r = g = b = l;
  } else {
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;

    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }

  r = Math.round(r * 255);
  g = Math.round(g * 255);
  b = Math.round(b * 255);

  return { r, g, b };
}

/** rgb 转换成 hex
 * @param {rgb} rgb
 * @returns {string} hex 值
 */
export function rgbToHex(rgb) {
  const redHex = rgb.r.toString(16).padStart(2, '0');
  const greenHex = rgb.g.toString(16).padStart(2, '0');
  const blueHex = rgb.b.toString(16).padStart(2, '0');
  return `#${redHex}${greenHex}${blueHex}`;
}

export function rgbToRgb(rgb) {
  return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;
}

/** 颜色可以将一个颜色分成10段并动态生成css
 * 
 * 例如 color('#409EFF', 'primary')
 * 
 * 生成的 class 如下
 * <style id="ee-color-primary" type="text/css">
 * :root {
 *   --primary-1: #409EFF; 
 *   --primary0: #409EFF;
 *   --primary1: #409EFF;
 *   --primary2: #409EFF;
 *   --primary3: #409EFF;
 *   --primary4: #409EFF;
 *   --primary5: #409EFF;
 *   --primary6: #409EFF;
 *   --primary7: #409EFF;
 *   --primary8: #409EFF;
 *   --primary9: #409EFF;
 *   --primary-shadow: ;
 * }
 * </style>
 * 
 * @param {rgb} rgb - 颜色值，为空则尝试删除颜色主题
 * @param {string} name - 颜色主题class名
 */
export function color(rgb, name) {
  const styleID = "ee-color-" + name;
  if (!rgb) {
    document.querySelector('style#' + styleID)?.remove();
    return;
  }

  const hsl = rgbToHsl(rgb);
  const style = document.querySelector('style#' + styleID) || document.head.appendChild(document.createElement("style"));
  style.id = styleID;
  style.setAttribute("type", "text/css");

  const array = [];
  array.push(':root{');
  const l = (100 - hsl.l) / 10;
  for (let i = -1; i < 10; i++)
    array.push(`--${name}${i}:${rgbToHex(hslToRgb({ h: hsl.h, s: hsl.s, l: hsl.l + l * i }))};`);
  array.push('}');

  // 按钮颜色样式
  // todo: 可以参考 UIkit 的 uk-text-success(文字颜色) 和 uk-label-success(背景颜色)
  array.push(
`
[class*="eec-"][class*="-${name}"] { 
  color: var(--${name}0);
}
[class*="eec-"][class*="-${name}"][class*="-label"],
[class*="eec-"][class*="-${name}"][class*="-button"] { 
   color: var(--${name}9);
   background-color: var(--${name}0);
}
[class*="eec-"][class*="-${name}"][class*="-button"] {
  border: 1px solid var(--${name}0);
}
[class*="eec-"][class*="-${name}"][class*="-label"] {
  border-width: 0;
}
[class*="eec-"][class*="-${name}"][class*="-border"] {
  border: 1px solid var(--${name}5);
}
[class*="eec-"][class*="-${name}"][class*="-button"]:not([disabled]):hover {
  background-color: var(--${name}1);
  border-color: var(--${name}1);
}
[class*="eec-"][class*="-${name}"][class*="-button"]:not([disabled]):active {
  background-color: var(--${name}-1);
  border-color: var(--${name}-1);
}
[class*="eec-"][class*="-${name}"][class*="-plain"] {
  color: var(--${name}0);
  background-color: var(--${name}9);
}
[class*="eec-"][class*="-${name}"][class*="-plain"][class*="-button"] {
  border-color: var(--${name}5);
}
[class*="eec-"][class*="-${name}"][class*="-plain"][class*="-button"]:not([disabled]):hover {
  color: var(--${name}9);
  background-color: var(--${name}0);
  border-color: var(--${name}0);
}
[class*="eec-"][class*="-${name}"][class*="-plain"][class*="-button"]:not([disabled]):active {
  background-color: var(--${name}-1);
  border-color: var(--${name}-1);
}
`)

  style.innerHTML = array.join('');
}